<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>
<style>

    .title{text-align: center;
           font-size:2em;
           font-weight:bold;
            }
    /* class = “info”标签下的属性*/
    .info{text-align:center;
         font-weight:bold;
         line-height:5em;
            }
    
    /* 使用id标识textarea的对象，定义自我介绍的长和宽 */
    #information{
        width :500px;
        height:200px;
    }
    
</style>
<body>
    <form>
        <p class="title"> 信息注册表格</p>
        <!-- 1.表单中包括：用户名，密码，性别，学历（本科，专科），自我介绍； -->
        <p class = "info">
            用户名:<input id="username" placeholder="请输入账号..">
        <br>密 &nbsp;&nbsp;码:<input type = "password" placeholder = "请输入密码...">
        <br>   性 &nbsp;&nbsp;别:
            <input type="radio" name = "sex"> 男
            <input type="radio" name = "sex"> 女
        <br>    学 &nbsp;&nbsp;历:
            <select>
                <option>本科</option>
                <option>专科</option> 
            </select>
        <br>   自我介绍:
            <textarea id = "information" ></textarea>
        <br><button>重置</button>
            <button onclick="login()">注册</button>
            <!-- <button onclick ="show()">提交</button> -->
        </p>
    </form>

    <script>
        // 2.输入完用户名后校验只能是"admin"，否则弹框提示错误 
        // 直接在按钮的onclick上添加函数 不需要返回true/false
        function login(){
           var name = document.getElementById("username").value;
           if(name == "admin"){
               alert("用户名输入正确！");
            //3.点击提交执行后执行事件，把自我介绍的内容弹框提示出来
               var txt = document.getElementById("information").value;
               alert(txt);
           }else{
            alert("用户名输入错误！");
           }        
        }
    </script>
    
</body>
</html>